<template>
    <div id="vue-loading">
        <div class="loader"></div>
    </div>
</template>
<script>
export default {
    name: "loading",
    data() {
        return {
            show: true,
        };
    },
};
</script>
<style  scoped>
#vue-loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0.75;
    z-index: 99999;
}
.loader {
    position: relative;
    width: 5.5em;
    height: 5.5em;
    z-index: 10000;
    transform: rotate(125deg);
}
.loader:before,
.loader:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0.5em;
    height: 0.5em;
    z-index: 10000;
    border-radius: 0.25em;
    transform: translate(-50%, -50%);
}
.loader:before {
    animation: before 2s infinite;
}
.loader:after {
    animation: after 2s infinite;
}
@keyframes before {
    0% {
        width: 0.5em;
        box-shadow: 1em -0.5em rgba(231,56,40,1.000),
            -1em 0.5em rgba(13,172,103,1.000);
    }
    35% {
        width: 2.5em;
        box-shadow: 0 -0.5em rgba(231,56,40,1.000),
            0 0.5em rgba(13,172,103,1.000);
    }
    70% {
        width: 0.5em;
        box-shadow: -1em -0.5em rgba(231,56,40,1.000),
            1em 0.5em rgba(13,172,103,1.000);
    }
    100% {
        box-shadow: 1em -0.5em rgba(231,56,40,1.000),
            -1em 0.5em rgba(13,172,103,1.000);
    }
}
@keyframes after {
    0% {
        height: 0.5em;
        box-shadow: 0.5em 1em rgba(44,166,224,1.000),
            -0.5em -1em rgba(242,150,0,1.000);
    }
    35% {
        height: 2.5em;
        box-shadow: 0.5em 0 rgba(44,166,224,1.000),
            -0.5em 0 rgba(242,150,0,1.000);
    }
    70% {
        height: 0.5em;
        box-shadow: 0.5em -1em rgba(44,166,224,1.000),
            -0.5em 1em rgba(242,150,0,1.000);
    }
    100% {
        box-shadow: 0.5em 1em rgba(44,166,224,1.000),
            -0.5em -1em rgba(242,150,0,1.000);
    }
}
.loader {
    position: absolute;
    top: calc(50% - 2.25em);
    left: calc(50% - 2.25em);
}
</style>